<!-- BEGIN: ACCORDION DEMO -->
<div class="toolbar">
    <div class="page-bar">
        <ul class="page-breadcrumb float-right">
            <li>
                <i class="fa fa-home"></i>
                <a [routerLink]="['/index/home']">管理中心</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a [routerLink]="['/index/article']">文章管理</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="javascript:;">{{appServ.pageTitle}}</a>
            </li>
        </ul>
        <h1 class="page-title"> <i class="icon-note font-green-sharp"></i> {{appServ.pageTitle}}</h1>
    </div>
</div>

<div class="dataform">
    <form class="form-horizontal" name="editForm" #editForm="ngForm" role="form" novalidate>
        <input type="hidden" ng-model="data.Id">
        <ngb-tabset [destroyOnHide]="false">
            <ngb-tab title="基本设置">
                <ng-template ngbTabContent>
                    <div class="form-body">
                        <div class="form-group row">
                            <label for="Title" class="col-2 col-form-label">文章标题:</label>
                            <div class="col-4">
                                <input type="text" [(ngModel)]="dataInfo.Title" name="Title" minlength="2" maxlength="30" class="form-control" placeholder="文章标题" required>
                            </div>
                            <label for="RedirectUrl" class="col-2 col-form-label">跳转url:</label>
                            <div class="col-4">
                                <input type="text" [(ngModel)]="dataInfo.RedirectUrl" name="RedirectUrl" maxlength="255" class="form-control" placeholder="跳转url">
                            </div>
                        </div>
                        <div class="form-group row" ng-if="data.Id==0">
                            <label class="col-2 col-form-label">所属分类:</label>
                            <div class="col-4">
                                <div class="input-group">
                                    <input type="hidden" name="CategoryId" #CategoryId="ngModel" [(ngModel)]="dataInfo.Category_Id" pattern="^([1-9][0-9]*)$" required/>
                                    <span class="form-control">{{selectedCategorys.CategoryName}}</span>
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle" (click)="showCategoryTree=!showCategoryTree">
                                            <i class="fa fa-angle-down"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="categorys" *ngIf="showCategoryTree">
                                    <p-tree (onNodeSelect)="categorySelect($event)" [value]="categorys" [styleClass]="'full-width'" selectionMode="single" [(selection)]="selectedCategorys"></p-tree>
                                </div>
                            </div>
                            <label class="col-2 col-form-label">作者:</label>
                            <div class="col-4">
                                <input type="text" [(ngModel)]="dataInfo.Author" name="Author" maxlength="30" class="form-control" placeholder="作者">
                            </div>
                        </div>
                        <div class="form-group row" ng-class="{'has-error' : ggcmsForm.btnSelectLogo.$invalid&&!ggcmsForm.btnSelectLogo.$pristine}">
                            <label class="col-2 col-form-label">标题图:</label>
                            <div class="col-6">
                                <div class="input-group">
                                    <input type="text" class="form-control input-medium" [(ngModel)]="dataInfo.TitleImg" name="Logo" id="Logo" placeholder="可以直接填写Url地址" />
                                    <div class="btn-group">
                                        <file-upload (fileSelect)="fileSelect($event,0,'TitleImg')" [fileType]="'image/*'" [fileTypeErr]="'上传文件类型不正确'" [fileMaxSize]="'500KB'" [fileMaxSizeErr]="'文件太大了'">
                                            <button type="button" class="btn blue"> <i class="fa fa-file-o"></i> 选择图片 </button></file-upload>
                                        <button class="btn green" name="btnPreviewLogo" (click)="filePreview($event,dataInfo.TitleImg)" *ngIf="dataInfo.TitleImg"> <i class="icon-eye"></i> 预览 </button>
                                        <button class="btn btn-danger" name="btnClearLogo" *ngIf="dataInfo.TitleImg" (click)="dataInfo.TitleImg=''"> <i class="icon-trash"></i> 清除 </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-2 col-form-label">文章内容:</label>
                            <div class="col-10">
                                <tiny-editor [elementId]="'my-editor-id'" [(value)]="dataInfo.Content" (fileUploaded)="editUpload($event,'Content')">
                                </tiny-editor>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </ngb-tab>
            <ngb-tab title="其他设置">
                <ng-template ngbTabContent>
                    <div class="form-body">
                        <div class="form-group row">
                            <label class="col-2 col-form-label">Keywords:</label>
                            <div class="col-10">
                                <input name="Keywords" maxlength="255" id="Keywords" [(ngModel)]="dataInfo.Keywords" placeholder="Keywords" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-2 col-form-label">Description:</label>
                            <div class="col-10">
                                <textarea name="Description" maxlength="255" id="Description" [(ngModel)]="dataInfo.Description" placeholder="摘要信息" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-2 col-form-label">风格:</label>
                            <div class="col-6">
                                <select (ngModelChange)="onStyleChange($event)" name="StyleName" class="form-control input-inline" id="StyleName" [(ngModel)]="dataInfo.StyleName">
                                    <option value="" selected>---请选择---</option> 
                                    <option [value]="item.Folder" *ngFor="let item of styleList" >{{item.StyleName}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row" ng-if="data.Id==0">
                            <label class="col-2 col-form-label">分类模板:</label>
                            <div class="col-4">
                                <select name="TmplName" class="form-control input-inline" id="TmplName" [(ngModel)]="dataInfo.TmplName">
                                    <option value="" selected>---请选择---</option> 
                                    <option [value]="item.name" *ngFor="let item of articleTmpl" >{{item.name}}</option>
                                </select>
                            </div>
                            <label class="col-2 col-form-label">移动文章模板:</label>
                            <div class="col-4">
                                <select name="MobileTmplName" class="form-control input-inline" id="MobileTmplName" [(ngModel)]="dataInfo.MobileTmplName">
                                    <option value="" selected>---请选择---</option> 
                                    <option [value]="item.name" *ngFor="let item of mobArticleTmpl" >{{item.name}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </ngb-tab>
            <ngb-tab title="附件管理">
                <ng-template ngbTabContent>
                    <div class="form-body">
                        <div class="form-group">
                            <button class="btn blue" type="button" (click)="addAttachment()"> <i class="fa fa-paperclip fa-fw"></i> 添加附件</button>
                        </div>
                        <div class="form-group row" *ngFor="let item of dataInfo.attachments; let i=index">
                            <label class="col-2 col-form-label">标题:</label>
                            <div class="col-2">
                                <input type="text" class="form-control input-medium" [(ngModel)]="item.AttaTitle" [name]="'AttaTitle_'+i" [id]="'AttaTitle_'+i" placeholder="输入附件标题" />
                            </div>
                            <label class="col-2 col-form-label">上传:</label>
                            <div class="col-6">
                                <div class="input-group">
                                    <input type="text" class="form-control input-medium" [(ngModel)]="item.AttaUrl" [name]="'AttaUrl_'+i" [id]="'AttaUrl_'+i" placeholder="可以直接填写Url地址" />
                                    <div class="btn-group">
                                        <file-upload (fileSelect)="fileSelect($event,2,i)">
                                            <button type="button" class="btn blue"> <i class="fa fa-file-o"></i> 选择文件 </button></file-upload>
                                        <button type="button" class="btn green" name="btnPreviewLogo" (click)="filePreview($event,item.AttaUrl)" *ngIf="item.AttaUrl"> <i class="icon-eye"></i> 预览 </button>
                                        <button type="button" class="btn btn-danger" name="btnClearLogo" *ngIf="item.AttaUrl" (click)="delAttachment(i)"> <i class="icon-trash"></i> 删除 </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </ngb-tab>
        </ngb-tabset>

        <div class="form-actions">
            <hr/>
            <div class="row">
                <div class="col-md-12 text-center">
                    <button class="btn green" (click)="dataSave()" [disabled]="!editForm.form.valid"> <span class="fa fa-save"></span> 保存</button>
                </div>
            </div>
        </div>
    </form>

</div>
<p-overlayPanel #imgPreview appendTo="body">
    <div class="imgPreview">
        <img [src]="preViewUrl" *ngIf="preViewUrl" class="img-fluid" />
        <video [src]="preViewVideo" #preVideo controls="true" *ngIf="preViewVideo"></video>
    </div>
</p-overlayPanel>